<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="order-content">
			<view class="order-row">
				<u-cell title="还车方式" :titleStyle="titleStyle">
					<view slot="value">
						 <u-radio-group v-model="post_data.back_type" :activeColor="$s.theme">
							<u-radio :name="1" :customStyle="{marginRight: '8px'}">定点还车</u-radio>
							<u-radio :name="2">门店还车</u-radio>
						</u-radio-group>
					</view>
				</u-cell>
				<u-cell title="还车定位" :isLink="true" :titleStyle="titleStyle" v-if="post_data.back_type==1">
					<view slot="value" class="laction-val" @click="selectLocation">
						<view class="tips-text" v-if="post_data.back_address==''">请选择还车地址</view>
						<view v-else>{{post_data.back_address}}</view>
					</view>
				</u-cell>
				<u-cell title="还车门店" :isLink="true" :titleStyle="titleStyle" v-else>
					<view slot="value" @click="selectStore">
						<view class="tips-text" v-if="store.name==''">请选择还车门店</view>
						<view v-else>{{store.name}}</view>
					</view>
				</u-cell>
				<view class="back-car-pz">还车凭证</view>
				<view class="upload-box">
					<my-u-upload
						:fileList="file_list1"
						@afterRead="afterRead"
						@delete="deletePic"
						multiple
						name="1"
						width="100"
						height="100"
						:maxCount="20"
						:previewFullImage="true"
					></my-u-upload>
				</view>
				<view>
					<button class="my-but-primary" text="" @click="submit()">确定提交</button>
				</view>
			</view>
			
			<my-picker :show="store.show" :confirmColor="$s.theme" :columns="store.list" keyName="name" @cancel="storeClose" @confirm="stroeConfirm"></my-picker>
		
		</view>		
	</view>
</template>

<script>
	import $file from "@/common/file"
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'上传还车凭证',
				file_list1:[],
				titleStyle:'font-size:28rpx',
				store:{
					id:0,
					name:'',
					show:false,
					list:[],
				},
				post_data:{
					order_id:0,
					images_path:'',
					back_type:1,			//还车方式 1：定点还车 2：门店还车
					back_store:0,
					back_address:'',
					back_lng:0,
					back_lat:0,
				}
			}
		},
		onLoad(option){
			if(option.id!=null){
				this.post_data.order_id=option.id
				this.initData()
			}else{
				this.$c.error('缺少参数','index/index')
			}
		},
		onShow(){
		},
		methods: {
			initData(){
				//获取所有门店
				this.$u.api.cityStoreList().then(res=>{
					this.store.list=[res.data]
				})
				
				//获取订单信息
				this.$u.api.orderInfo({order_id:this.post_data.order_id}).then(res=>{
					let data=res.data.order
					this.post_data.back_type=data.back_type
					if(data.back_type==1){
						this.post_data.back_address=data.back_address
						this.post_data.back_lng=data.back_lng
						this.post_data.back_lat=data.back_lat
					}else{
						this.post_data.back_store=data.back_store.id
						this.store.id=data.back_store.id
						this.store.name=data.back_name
					}
				})
			},
			//删除图片
			deletePic(event) {
				this[`file_list${event.name}`].splice(event.index, 1)
			},
			//上传图片
			async afterRead(event){
				this[`file_list${event.name}`]= await $file.multipleUpload(event,this[`file_list${event.name}`])
			},
			//选择门店
			selectStore(){
				if(this.store.list.length>0){
					this.store.show=true
				}else{
					this.$c.error('暂无门店')
				}
			},
			//关闭门店选择
			storeClose(){
				this.store.show=false
			},
			//选择门店
			stroeConfirm(e){
				this.post_data.back_store=e.value[0].id
				this.store.id=e.value[0].id
				this.store.name=e.value[0].name
				this.store.show=false
			},
			//选择地址
			selectLocation(){
				uni.chooseLocation({
					success: (mapres) => {
						let lat, lng;
						lat = mapres.latitude.toString()
						lng = mapres.longitude.toString()
						uni.$u.api.mapLocation({lat:lat,lng:lng}).then(res=>{
							this.post_data.back_address=res.data.address
							this.post_data.back_lng=mapres.longitude
							this.post_data.back_lat=mapres.latitude
						})
					}
				})
			},
			//提交订单
			submit(){
				if(this.post_data.back_type===2){
					if(this.post_data.back_store==0){
						this.$c.error('请选择还车门店')
						return
					}
				}else if(this.post_data.back_type===1){
					if(this.post_data.back_address=='' || this.post_data.back_lng==0 || this.post_data.latitude==0){
						this.$c.error('请选择还车地址')
						return
					}
				}else{
					// if(this.file_list1.length==0){
					// 	this.$c.error('请上传还车凭证')
					// 	return
					// }
				}
				
				let imgs=[]
				this.file_list1.map((item) => {
					imgs.push(item.url)
				})
				this.post_data.images_path=imgs.join(',')
				
				//上传凭证
				this.$u.api.uploadBack(this.post_data).then(res=>{
					this.$c.success('提交成功！','order/detail/index?id='+this.post_data.order_id,4)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $u-bg-color;
	}
	.order-content{
		margin: 20rpx;
	}
	.order-row{
		font-size:28rpx;
		padding: 20rpx;
		position: relative;
		margin-bottom: 20rpx;
		overflow: hidden;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.order-row .upload-box{
		margin: 10rpx 30rpx;
	}
	.back-car-pz{
		padding: 10rpx 30rpx;
	}
	.tips-text{
		font-size: 28rpx;
		color:$u-tips-color;
	}
	.laction-val{
		width: 400rpx;
	}
</style>
